<template>
  <div class="page">
    <div class="title">客户电话沟通</div>
    <div class="topContent">
      <div class="baseInfo">
        <div class="infoContent">
          <div class="avator"></div>
          <div class="rightContent">
            <div class="introduce">
              <div class="name">
                <span>姓名：</span>
                <span>张三</span>
              </div>
              <div class="age">
                <span>年龄：</span>
                <span>27岁</span>
              </div>
              <div class="customId">
                <span>核心客户号：</span>
                <span>982131232123</span>
              </div>
            </div>
            <div class="tagList">
              <div class="tag-item" v-for="(item, index) in tagList" :key="index">
                {{ item }}
              </div>
            </div>
          </div>
        </div>
        <div class="assetInfo">
          <div class="name">资产信息</div>
          <div class="chartBox">
            <div class="chartBoxLeft">
              <BarChart />
            </div>
            <div class="chartBoxRight">
              <div class="aum">
                <div class="label">AUM时点余额(元)</div>
                <div class="value">18,560.00</div>
                <div class="count">
                  <span>比上月 </span>
                  <i class="ui-icon-caret-bottom" :style="{ color: aumIncrease == 0 ? 'red' : 'green' }"></i>
                  <span class="number" :style="{ color: aumIncrease == 0 ? 'red' : 'green' }">3%</span>
                </div>
              </div>
              <div class="aum">
                <div class="label">AUM月日均(元)</div>
                <div class="value">18,560.00</div>
                <div class="count">
                  <span>比上月 </span>
                  <i class="ui-icon-caret-top"></i>
                  <span class="number">3%</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="formContent">
        <div class="moduleName">通话登记信息</div>
        <ui-form label-width="100px" :model="form" ref="form" :rules="rules" class="form">
          <ui-form-item label="接触类型:">
            <ui-checkbox-group v-model="form.contactType">
              <ui-checkbox :label="item.value" v-for="(item, i) in contactTypeList" :key="i">
                {{ item.name }}
              </ui-checkbox>
            </ui-checkbox-group>
          </ui-form-item>
          <ui-form-item label="拨打状态:">
            <ui-checkbox-group v-model="form.callingStatus">
              <ui-checkbox :label="item.value" v-for="(item, i) in callingStatusList" :key="i">
                {{ item.name }}
              </ui-checkbox>
            </ui-checkbox-group>
          </ui-form-item>
          <ui-form-item label="新进资金:">
            <div class="newFundContent">
              <ui-checkbox v-model="form.newFund" class="newFund">新进资金</ui-checkbox>
              <ui-input type="text" v-model="form.rangeMin" style="width: 30%"> </ui-input>
              <span class="split">——</span>
              <ui-input type="text" v-model="form.rangeMax" style="width: 30%"> </ui-input>
              <span>（元）</span>
            </div>
            <ui-form-item label="到账时间">
              <ui-date-picker v-model="form.accountTime" type="date" style="width: 35%"> </ui-date-picker>
            </ui-form-item>
          </ui-form-item>
          <ui-form-item label="产品倾向:">
            <ui-checkbox-group v-model="form.productDirection">
              <ui-checkbox :label="item.value" v-for="(item, i) in productDirectionList" :key="i">
                {{ item.name }}
              </ui-checkbox>
            </ui-checkbox-group>
          </ui-form-item>
          <ui-form-item label="下次沟通时间:">
            <ui-date-picker v-model="form.nextTime" type="date" style="width: 30%"> </ui-date-picker>
          </ui-form-item>
          <ui-form-item label="接触内容：">
            <ui-input placeholder="请输入接触内容" v-model="form.reason" type="textarea" :rows="5"> </ui-input>
          </ui-form-item>
        </ui-form>
      </div>
    </div>
    <div class="mainContent">
      <div class="left">
        <div class="taskSelect">
          <div class="moduleName">营销任务选择</div>
          <div class="table">
            <vx-table :tableData="tableData" :columns="columns" :buttomGroup="buttomGroup" @toDetail="toDetail" :isSelect="true"> </vx-table>
          </div>
        </div>
        <div class="touchInfo">
          <div class="moduleName">
            <span class="name">最近一次接触信息</span>
            <span class="more">查看更多</span>
          </div>
          <div class="touchInfoList">
            <div class="touchInfo-item">
              <span class="label">最近一次接触时间：</span>
              <span class="value">2023-06-17 11:30</span>
            </div>
            <div class="touchInfo-item">
              <span class="label">接触渠道：</span>
              <span class="value">电话</span>
            </div>
            <div class="touchInfo-item">
              <span class="label">实际接触内容：</span>
              <span class="value">详情</span>
            </div>
            <div class="touchInfo-item">
              <span class="label">联系方式：</span>
              <span class="value">135 7832 0913</span>
            </div>
          </div>
        </div>
        <div class="equityQualification">
          <div class="moduleName">
            <span class="name">满足的权益资格</span>
            <span class="more">查看全部</span>
          </div>
          <div class="equityQualificationList">
            <div class="equityQualification-item">
              <span class="label">机场贵宾厅权益13个;</span>
              <span class="value">其他权益8个</span>
            </div>
            <div class="equityQualification-item">
              <span class="label">XXX券余额：</span>
              <span class="value">206点</span>
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <ui-radio-group v-model="tabActive" style="margin-bottom: 30px" @change="tabChange">
          <ui-radio-button label="0">营销指引</ui-radio-button>
          <ui-radio-button label="1">营销活动</ui-radio-button>
          <ui-radio-button label="2">事件提醒</ui-radio-button>
        </ui-radio-group>
        <div class="content" v-if="tabActive == 0">
          <div class="content-item">
            <span class="label">指引内容：</span>
            <span class="value">指引内容</span>
          </div>
          <div class="content-item">
            <span class="label">备注：</span>
            <span class="value">备注备注备注</span>
          </div>
        </div>
        <div class="content" v-if="tabActive == 1">
          <vx-table :tableData="activityTableData" :columns="activityColumns" :buttomGroup="activityButtomGroup" @toActivityDetail="toActivityDetail">
          </vx-table>
        </div>
        <div class="content" v-if="tabActive == 2">
          <div class="content-item">
            <div class="label">1、客户理财产品到期</div>
            <div class="value">客户xxxx理财产品于2023-10-01到期</div>
          </div>
          <div class="content-item">
            <div class="label">2、客户资产提升500,000.00元</div>
            <div class="value">客户资产于2023-09-01入账500,000.00元</div>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="buttonBox">
        <ui-button class="default-btn" @click="back">返回</ui-button>
        <ui-button class="primary-btn" @click="submit">确定</ui-button>
      </div>
    </div>
  </div>
</template>

<script>
import BarChart from '../component/BarChart.vue';
import vxTable from '@/components/vx-table';
export default {
  name: '',
  components: {
    BarChart,
    vxTable,
  },
  data() {
    return {
      aumIncrease: 0,
      tagList: ['优质父母', '有车有房', '女性客群', '精英阶层', '基金客群', '代发客群', '有效客户'],
      form: {
        contactType: [],
        callingStatus: [],
        productDirection: [],
      },
      rules: {},
      contactTypeList: [
        { name: '营销活动', value: 1 },
        { name: '产品推荐', value: 2 },
        { name: '关怀祝福', value: 3 },
        { name: '活动宣传', value: 4 },
      ],
      callingStatusList: [
        { name: '本人接听', value: 1 },
        { name: '非本人', value: 2 },
        { name: '无人接听', value: 3 },
        { name: '关机', value: 4 },
        { name: '拒接', value: 5 },
        { name: '号码异常', value: 6 },
      ],
      productDirectionList: [
        { name: '理财', value: 1 },
        { name: '基金', value: 2 },
        { name: '保险', value: 3 },
        { name: '贵金属', value: 4 },
        { name: '信托', value: 5 },
        { name: '大额存单', value: 6 },
        { name: '贷款', value: 7 },
        { name: '信用卡', value: 8 },
        { name: '权益', value: 9 },
      ],
      tableData: [{ taskName: '1111111111' }, { taskName: '2222222' }, { taskName: '333333' }, { taskName: '44444' }, { taskName: '55555' }],
      columns: [
        {
          prop: 'index',
          label: '序号',
          formatter: (row, column, cellValue, index) => {
            return index + 1;
          },
        },
        {
          label: '任务名称',
          prop: 'taskName',
        },
        {
          label: '结束日期',
          prop: 'endTime',
        },
      ],
      activityTableData: [{ taskName: '1111111111' }, { taskName: '2222222' }, { taskName: '333333' }, { taskName: '44444' }, { taskName: '55555' }],
      activityColumns: [
        {
          prop: 'index',
          label: '序号',
          formatter: (row, column, cellValue, index) => {
            return index + 1;
          },
        },
        {
          label: '活动类型',
          prop: 'taskName',
        },
        {
          label: '活动名称',
          prop: 'taskName',
        },
        {
          label: '活动说明',
          prop: 'taskName',
        },
        {
          label: '开始日期',
          prop: 'endTime',
        },
        {
          label: '结束日期',
          prop: 'endTime',
        },
      ],
      customSelection: [],
      isLoading: false,
      buttomGroup: [{ label: '详情', methodsName: 'toDetail' }],
      tabActive: 0,
      activityButtomGroup: [{ label: '详情', methodsName: 'toActivityDetail' }],
    };
  },
  mounted() {},
  methods: {
    toDetail(e) {},
    tabChange(e) {},
    toActivityDetail(e) {},
    submit() {},
    back() {
      this.$router.back();
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  .title {
    font-size: 18px;
    color: #000;
    font-weight: bold;
    margin-bottom: 10px;
  }
  .moduleName {
    font-size: 16px;
    color: #000;
    font-weight: bold;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .name {
      font-size: 16px;
      color: #000;
      font-weight: bold;
    }
    .more {
      font-size: 16px;
      color: #ccc;
      font-weight: normal;
    }
  }
  .topContent {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 600px;
    .baseInfo {
      background: #fff;
      width: 45%;
      padding: 30px 20px;
      height: 100%;
      box-sizing: border-box;
      border: 1px solid #ccc;
      border-radius: 10px;
      .infoContent {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .avator {
          width: 60px;
          height: 60px;
          border-radius: 50%;
          background: #5075ff;
        }
        .rightContent {
          width: calc(100% - 80px);
          .introduce {
            display: flex;
            align-items: center;
            div {
              margin-right: 15px;
            }
          }
          .tagList {
            display: flex;
            align-items: center;
            justify-content: left;
            flex-wrap: wrap;
            margin-top: 10px;
            .tag-item {
              margin-right: 10px;
              padding: 5px 10px;
              background: #6178ff;
              border-radius: 3px;
              color: #fff;
              margin-bottom: 10px;
            }
          }
        }
      }
      .assetInfo {
        .name {
          font-size: 16px;
          color: #000;
          font-weight: bold;
          margin-top: 15px;
        }
        .chartBox {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .chartBoxLeft {
            width: 70%;
          }
          .chartBoxRight {
            width: 30%;
            margin-left: 50px;
            .aum {
              margin-bottom: 30px;
              .value {
                font-size: 16px;
                color: #000;
                margin-top: 10px;
                margin-bottom: 20px;
              }
              i {
                font-size: 18px;
              }
            }
          }
        }
      }
    }
    .formContent {
      height: 100%;
      background: #fff;
      width: 55%;
      padding: 20px 10px;
      margin-left: 10px;
      border: 1px solid #ccc;
      border-radius: 10px;
      box-sizing: border-box;
      .form {
        margin-top: 20px;
      }
      .name {
        font-size: 14px;
        color: #000;
        font-weight: bold;
        margin-bottom: 10px;
      }
      .split {
        margin: 0 10px;
      }
      .newFundContent {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        .newFund {
          margin-right: 10px;
        }
      }
    }
  }
  .mainContent {
    height: 1000px;
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left {
      width: 35%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-content: center;
      justify-content: space-between;

      .taskSelect {
        height: 49%;
        border: 1px solid #ccc;
        border-radius: 10px;
        padding: 10px 20px;
        box-sizing: border-box;
        .table {
          margin-top: 20px;
        }
      }
      .touchInfo {
        height: 29%;
        border: 1px solid #ccc;
        border-radius: 10px;
        padding: 10px 20px;
        box-sizing: border-box;
        .touchInfoList {
          margin-top: 40px;
          .touchInfo-item {
            margin-bottom: 20px;
            .label {
              font-size: 16px;
            }
            .value {
              font-size: 16px;
              color: #000;
            }
          }
        }
      }
      .equityQualification {
        height: 20%;
        border: 1px solid #ccc;
        border-radius: 10px;
        padding: 10px 20px;
        box-sizing: border-box;
        .equityQualificationList {
          margin-top: 40px;
          .equityQualification-item {
            margin-bottom: 20px;
            .label {
              font-size: 16px;
            }
            .value {
              font-size: 16px;
              color: #000;
            }
          }
        }
      }
    }
    .right {
      width: 64%;
      height: 100%;
      border: 1px solid #ccc;
      border-radius: 10px;
      padding: 20px;
      box-sizing: border-box;
      .content {
        padding: 10px 20px;
        .content-item {
          margin-bottom: 30px;
          .label {
            font-size: 16px;
            margin-bottom: 10px;
          }
          .value {
            font-size: 16px;
            color: #000;
          }
        }
      }
    }
  }
  .footer {
    background: #fff;
    padding: 20px;
    .buttonBox {
      padding: 20px 10px 0 10px;
      margin: auto;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
::v-deep .ui-date-editor--date .ui-input__prefix {
  left: 5px !important;
}
::v-deep .ui-date-editor--date .ui-input__inner {
  padding-left: 40px !important;
}
</style>